<template>
	<view>
		<!-- <nav-custom></nav-custom> -->
		<cu-custom></cu-custom>
		<scroll-view 
			class="vertical-scroll" 
			@scroll="handleScroll" 
			:scroll-into-view="topEle"
			scroll-with-animation
			scroll-y 
		>
			<view>
				<view id="top-ele"></view>
				<swiper :indicator-dots="true" indicator-active-color="#ffe32a">
					<swiper-item @tap="handleBanner(item.link)" v-for="(item,index) in banner">
						<image class="banner" :src="item.poster" mode=""></image>
					</swiper-item>
				</swiper>
				<!-- #ifdef MP-WEIXIN -->
				<view class="flex justify-around home-grid padding-tb u-border-bottom">
					<view 
						class="text-center" 
						v-for="(item,index) in list" 
						:key="index"
						@click="handleJump(item.target)"
					>
						<image :src="item.img" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</view>
				<!-- #endif -->
				<home-title title="本季推荐" en-title="Seasonal Recommend"></home-title>
				<scroll-view scroll-x >
					<view class="flex recommend">
						<image src="https://file2106.krkeji.top/QFPeaJG7ol1gUjM2K2zc4R50RfCoceBH/recommend1.jpg" mode="heightFix"></image>
						<image src="https://file2106.krkeji.top/JL39XBdydcIMe35DK7aRhbNtv19PU5Ri/recommend2.jpg" mode="heightFix"></image>
						<image src="https://file2106.krkeji.top/oXTHuekLtvHcBx9wfeR18O1aOGCyMBAG/recommend3.jpg" mode="heightFix"></image>
					</view>
				</scroll-view>
				<home-title title="法式经典" en-title="French Classic"></home-title>
				<image class="classify-poster" src="https://file2106.krkeji.top/OnSkQNUXfehQbx0cpSzJyRihajnjwSTD/french.jpg" mode=""></image>
				<view class="flex flex-wrap padding-sm justify-between">
					<good-item 
						v-for="(item,index) in glist" 
						:key="index"
						:gdata="item"
					></good-item>
				</view>
			</view>
		</scroll-view>
		<tab-custom></tab-custom>
		<view v-if="isShow" @tap="handleBack" class="back-top flex align-center justify-center">
			<text class="iconfont icon-tubiao_fanhuidingbu"></text>
		</view>
	</view>
</template>

<script>
	import {getGoodsList} from '../../api/goods.js'
	export default {
		data() {
			return {
				isShow:false,
				topEle:'',  //动态设置返回点
				banner:[],
				glist:[],
				list: [{
						img: 'https://file2105.h5project.cn/tjtx2a3xx8vzeP8CisP9pOmsnpYBUbPS/home_icon1.png',
						title: '最新活动',
						target:''
					},
					{
						img: 'https://file2105.h5project.cn/6GbkBdFvCe3apcl1zuSVOrnJ8sfPoAvK/home_icon2.png',
						title: '个人中心',
						target:'/sub_pages/my/my'
					},
					{
						img: 'https://file2105.h5project.cn/iU35SRTpe19CSKDrQ4h3BvNMh2sbLpwn/home_icon3.png',
						title: '关于我们',
						target:''
					},
					{
						img: 'https://file2105.h5project.cn/3udWeh91Q1PB0QN0PR8t5rUvfr0Pz5FL/home_icon4.png',
						title: '配送范围',
						target:''
					}
				],
			}
		},
		onLoad() {
			// 渲染banner
			this.$get('/classes/CakeBanner').then(res=>{
				this.banner = res.results
			})
			//渲染商品
			getGoodsList().then(res=>{
				this.glist = res.results
			})
		},
		methods: {
			handleScroll(ev){
				// console.log(ev);
				let {scrollTop} = ev.detail
				this.isShow = scrollTop>=550
				this.topEle = ''
			},
			handleBack(){
				this.topEle = 'top-ele'
			},
			handleBanner(link){
				// console.log(link);
				uni.navigateTo({
					url:`banner-detail?link=${link}`
				})
			},
			handleJump(url){
				if(!url){
					uni.showToast({
						title:'敬请期待',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
swiper,swiper-item{
	height: 1000upx;
}
.banner{
	height: 1000upx;
	width: 100%;
}
.home-grid{
	image{
		width: 80upx;
		height: 80upx;
	}
}
.recommend{
	image{
		flex-shrink: 0;
		height: 290upx;
	}
}
.classify-poster{
	height: 380upx;
	width: 100%;
}
.back-top{
	height: 100upx;
	width: 100upx;
	position: fixed;
	bottom: 20upx;
	right: 20upx;
	box-shadow: 0 0 20upx 0 rgba(0,0,0,0.3);
	background-color: #fff;
	border-radius: 50%;
}
.vertical-scroll{
	// border: 1px solid red;
	height: 100vh;
}
</style>
